<template>
  <div>
    <div class="top">
      <div class="fl top-left">试卷管理</div>
      <el-input size="small" class="fr top-right" suffix-icon="el-icon-search" clearable @input="getData()" v-model="tiaojian.name" placeholder="请输入搜索的名称" />
    </div>
    <div class="body">
      <!-- <div class="head">
        <div class="label">考场筛选</div>
        <div class="fl">考核时间：</div>
        <el-date-picker
          value-format="yyyy"
          size="small"
          v-model="form.name"
          type="year"
          placeholder="选择年">
        </el-date-picker>
      </div> -->
      <div class="head">
        <!-- <div class="label">岗位筛选</div> -->
        <div class="fl">试卷状态：</div>
        <el-select size="mini" filterable v-model="tiaojian.status" @change="getData()" style="width:150px;margin-right:20px">
          <el-option
            v-for="item in type_zhuangtai"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <div class="fl">级别：</div>
        <el-cascader
          filterable
          style="width:400px;margin-right:20px"
          size="mini"
          v-model="tiaojians"
          :options="type_all"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          @change="getData()"
          clearable>
        </el-cascader>
        <!-- <el-button type="primary" size="small" @click="getData()">重置</el-button>
        <el-button type="primary" size="small" @click="getData()">查询</el-button> -->
      </div>
      <el-button type="primary" size="small" style="margin-top:0px;margin-bottom:20px" @click="add()">新增试卷</el-button>

      <div v-for="(item, index) in tableData" :key="index" class="card shou" :style="getStyle(item)" @click="toInfo(item)">
        <div style="font-size: 16px;color:#333333;line-height:30px">
          <span v-html="item.name"></span>
          <i class="el-icon-edit shou icon-blue" title="修改名称" @click.stop="openXiugai(item)"></i>
        </div>
        <div style="font-size: 14px;color:#666666;margin-top:-10px">
          <div class="fl">
            总分{{item.score||'-'}}分
            <span style="margin:0 10px;color:#D6D6D6;font-size:18px">|</span>
            出题人：{{item.creater||'-'}}
            <span style="margin:0 10px;color:#D6D6D6;font-size:18px">|</span>
            生成时间：{{item.createDatetime||'-'}}
          </div>
          <i class="el-icon-arrow-right fr" style="font-size: 20px;font-weight:800;color: rgba(0, 0, 0, 0.5)"></i>
          <div class="fr" v-if="item.logicallyDelete" style="font-size: 18px;font-weight:bold;color: rgba(0, 0, 0, 0.5)">已停用</div>
        </div>
        <div style="font-size: 16px;color:#666666">
          <el-button v-if="item.logicallyDelete" type="primary" size="mini" @click.stop="tingyong(item, false)">启用试卷</el-button>
          <el-button v-else type="primary" size="mini" @click.stop="tingyong(item, true)">停用试卷</el-button>
          <el-button type="primary" size="mini" @click.stop="shanchu(item, idnex)">删除试卷</el-button>
          <el-button type="primary" size="mini" @click.stop="daochu(item)">导出试卷</el-button>
        </div>
      </div>

      <div style="width:100%;height:30px;margin-top: 24px;">
        <el-pagination
          style="float:right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :hide-on-single-page="false"
          :current-page="tiaojian.page"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="tiaojian.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      
    </div>
    <el-dialog title="试卷数据" :close-on-click-modal="false" width="90%" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt must">试卷名称：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" v-model="form.name" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt must">出题人：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" v-model="form.creater" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt must">试题总分：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <div style="line-height:28px">{{form.singleChoiceScore * form.singleChoiceAmount + form.multipleChoiceScore * form.multipleChoiceAmount + form.caseQuestionScore * form.caseQuestionAmount + form.scenarioQuestionScore * form.scenarioQuestionAmount}}分</div>
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt must">试题总数：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <div style="line-height:28px">{{form.singleChoiceAmount * 1 + form.multipleChoiceAmount * 1 + form.caseQuestionAmount * 1 + form.scenarioQuestionAmount * 1}}道</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt must">无条件抽取：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <div style="line-height:28px">
              <el-switch
                v-model="panduan"
                active-text="否"
                inactive-text="是">
              </el-switch>
            </div>
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">级别：</span>
          </el-col>
          <el-col class="mb" :span="24-span1-span1-span2">
            <el-cascader
              filterable
              :disabled="!panduan"
              style="width:100%"
              size="mini"
              v-model="dialog_tiaojians"
              :options="type_all"
              :props="{ checkStrictly: true, expandTrigger: 'hover' }"
              clearable>
            </el-cascader>
          </el-col>
        </el-row>
        <div class="title">题目信息</div>
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt must">单选题分数：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.singleChoiceScore">
              <template slot="append">分/每题</template>
            </el-input>
          </el-col>

          <el-col class="mb" :span="span1">
            <span class="mt must">多选题分数：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.multipleChoiceScore">
              <template slot="append">分/每题</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">案例题分数：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.caseQuestionScore">
              <template slot="append">分/每题</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">情景题分数：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.scenarioQuestionScore">
              <template slot="append">分/每题</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt must">单选题数量：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.singleChoiceAmount">
              <template slot="append">道</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">多选题数量：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.multipleChoiceAmount">
              <template slot="append">道</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">案例题数量：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.caseQuestionAmount">
              <template slot="append">道</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">情景题数量：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" v-model="form.scenarioQuestionAmount">
              <template slot="append">道</template>
            </el-input>
          </el-col>
        </el-row>

        <div v-if="panduan" class="title">题型比例（单选题、多选题）</div>
        <el-row v-if="panduan">
          <el-col class="mb" :span="span1">
            <span class="mt must">专业题库：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeZhuanye()" v-model="form.positionQuestionPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>

          <el-col class="mb" :span="span1">
            <span class="mt must">简单题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeZhuanyeNandu()" v-model="form.simpleQuestionPercentagePosition">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">中等题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeZhuanyeNandu()" v-model="form.mediumQuestionPercentagePosition">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">困难题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeZhuanyeNandu()" v-model="form.difficultQuestionPercentagePosition">
              <template slot="append">%</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="panduan">
          <el-col class="mb" :span="span1">
            <span class="mt must">通用题库比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" disabled v-model="form.commonQuestionPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">简单题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeTongyongNandu()" v-model="form.simpleQuestionPercentageCommon">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">中等题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeTongyongNandu()" v-model="form.mediumQuestionPercentageCommon">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">困难题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="xuanzeTongyongNandu()" v-model="form.difficultQuestionPercentageCommon">
              <template slot="append">%</template>
            </el-input>
          </el-col>
        </el-row>

        <div v-if="panduan" class="title">题型比例（案例题、情景题）</div>
        <el-row v-if="panduan">
          <el-col class="mb" :span="span1">
            <span class="mt must">专业题库：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" max="100" @input="wenbenZhuanye()" v-model="form.specialPositionPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>

          <el-col class="mb" :span="span1">
            <span class="mt must">简单题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="wenbenZhuanyeNandu()" v-model="form.simpleSpecialPositionPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">中等题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="wenbenZhuanyeNandu()" v-model="form.mediumSpecialPositionPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">困难题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="wenbenZhuanyeNandu()" v-model="form.difficultSpecialPositionPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="panduan">
          <el-col class="mb" :span="span1">
            <span class="mt must">通用题库比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" disabled v-model="form.specialCommonPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">简单题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="wenbenTongyongNandu()" v-model="form.simpleSpecialCommonPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">中等题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="wenbenTongyongNandu()" v-model="form.mediumSpecialCommonPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          
          <el-col class="mb" :span="span1">
            <span class="mt must">困难题比例：</span>
          </el-col>
          <el-col class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" placeholder="默认0" @input="wenbenTongyongNandu()" v-model="form.difficultSpecialCommonPercentage">
              <template slot="append">%</template>
            </el-input>
          </el-col>
        </el-row>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="维护数据" :close-on-click-modal="false" style="min-width:900px" :visible.sync="dialogXiugai">
      <el-form :model="form">
        <el-row>
          <el-col class="mb" :span="5">
            <span class="mt must">名称：</span>
          </el-col>
          <el-col class="mb" :span="15">
            <el-input size="mini" v-model="form_xiugai.name" />
          </el-col>
          <el-col class="mb" :span="5">
            <span class="mt must">单选题分数：</span>
          </el-col>
          <el-col class="mb" :span="15">
            <el-input size="mini" type="number" min="0" v-model="form_xiugai.singleChoiceScore" />
          </el-col>
          <el-col class="mb" :span="5">
            <span class="mt must">多选题分数：</span>
          </el-col>
          <el-col class="mb" :span="15">
            <el-input size="mini" type="number" min="0" v-model="form_xiugai.multipleChoiceScore" />
          </el-col>
          <el-col class="mb" :span="5">
            <span class="mt must">案例题分数：</span>
          </el-col>
          <el-col class="mb" :span="15">
            <el-input size="mini" type="number" min="0" v-model="form_xiugai.caseQuestionScore" />
          </el-col>
          <el-col class="mb" :span="5">
            <span class="mt must">情景题分数：</span>
          </el-col>
          <el-col class="mb" :span="15">
            <el-input size="mini" type="number" min="0" v-model="form_xiugai.scenarioQuestionScore" />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogXiugai = false">取 消</el-button>
        <el-button :disabled="form_xiugai.singleChoiceScore===''||form_xiugai.multipleChoiceScore===''||form_xiugai.caseQuestionScore===''||form_xiugai.scenarioQuestionScore===''||form_xiugai.name===''" type="primary" title="全部选项都不能为空" @click="xiugai()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $http from '@/utils/request'
import $httpJSON from '@/utils/requestJSON'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      dialogFormVisible: false,
      dialogXiugai: false,
      span1: 3,
      span2: 3,
      tiaojians: [],
      dialog_tiaojians: [],
      type_all: [],
      type_zhuangtai: [{
        name: '全部',
        value: ''
      }, {
        name: '启用',
        value: false
      }, {
        name: '停用',
        value: true
      }],
      tableData: [],
      total: 50,
      tiaojian: {
        page: 1,
        size: 10,
        name: '', // 试卷名称
        rankId: '', // 级别id
        departmentId: '', //部门id
        positionId: '', // 岗位id
        professionId: '', // 专业id
        status: '' // 试卷状态，默认查所有，true查未删除的，false查已经逻辑删除的
      },
      panduan: false, // 判断添加试卷时候是否是无条件添加
      form: {
        singleChoiceAmount: '', // 单选题目数量
        singleChoiceScore: '', // 单选题目分数
        multipleChoiceAmount: '', // 多选题目数量
        multipleChoiceScore: '', // 多选题目分数
        caseQuestionAmount: '', // 案例题目数量
        caseQuestionScore: '', // 案例题目分数
        scenarioQuestionAmount: '', // 情景题目数量
        scenarioQuestionScore: '', // 情景题目分数
        creater: '', // 创建人
        departmentId: '', // 部门标识
        
        positionQuestionPercentage: '', // 专业题库占比(单选，多选)
        commonQuestionPercentage: '', // 通用题库占比(单选，多选)
        
        specialPositionPercentage: '', // 专用题库占比(案例，情景)
        specialCommonPercentage: '', // 通用题库占比(案例，情景)

        simpleQuestionPercentagePosition: '', // 专用题库-简单题占比(单选，多选)
        mediumQuestionPercentagePosition: '', // 专用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentagePosition: '', // 专用题库-困难题占比(单选，多选)
        
        simpleQuestionPercentageCommon: '', // 通用题库-简单题占比(单选，多选)
        mediumQuestionPercentageCommon: '', // 通用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentageCommon: '', // 通用题库-困难题占比(单选，多选)

        simpleSpecialPositionPercentage: '', // 专用题库-简单题难度占比(案例，情景)
        mediumSpecialPositionPercentage: '', // 专用题库-中等难度占比(案例，情景)
        difficultSpecialPositionPercentage: '', // 专用题库-困难题占比(案例，情景)

        simpleSpecialCommonPercentage: '', // 通用题库-简单题占比(案例，情景)
        mediumSpecialCommonPercentage: '', // 通用题库-中等难度题占比(案例，情景)
        difficultSpecialCommonPercentage: '', // 通用题库-困难难度题占比(案例，情景)
        name: '', // 试券名
        positionId: '', // 岗位标识
        professionId: '', // 专业标识
        rankId: '', // 级别标识
        score: '' // 试券总分
      },
      form_xiugai: {
        caseQuestionScore: 0,
        id: '',
        logicallyDelete: false,
        multipleChoiceScore: 0,
        name: '',
        scenarioQuestionScore: 0,
        singleChoiceScore: 0
      }
    }
  },
  mounted() {
    this.getData()
    this.getAll()
  },
  methods: {
    xuanzeZhuanye() {
      if (this.form.positionQuestionPercentage > 100) {
        this.form.positionQuestionPercentage = 100
        this.$message.success('比例不能超过100')
      }
      if (this.form.positionQuestionPercentage < 0) {
        this.form.positionQuestionPercentage = 0
        this.$message.success('比例最低为0')
      }
      if (this.form.positionQuestionPercentage === '') {
        this.form.commonQuestionPercentage = ''
      } else {
        this.form.commonQuestionPercentage = 100 - this.form.positionQuestionPercentage
      }
    },
    wenbenZhuanye() {
      if (this.form.specialPositionPercentage > 100) {
        this.form.specialPositionPercentage = 100
        this.$message.success('比例不能超过100')
      }
      if (this.form.specialPositionPercentage < 0) {
        this.form.specialPositionPercentage = 0
        this.$message.success('比例最低为0')
      }
      if (this.form.specialPositionPercentage === '') {
        this.form.specialCommonPercentage = ''
      } else {
        this.form.specialCommonPercentage = 100 - this.form.specialPositionPercentage
      }
    },
    xuanzeZhuanyeNandu(val) {
      // if (this.form.simpleQuestionPercentagePosition > 100) {
      //   this.form.simpleQuestionPercentagePosition = 100
      //   this.$message.success('专业题库(单选题、多选题)简单比例最低为0')
      // }
      // if (this.form.mediumQuestionPercentagePosition > 100) {
      //   this.form.mediumQuestionPercentagePosition = 100
      //   this.$message.success('专业题库(单选题、多选题)普通比例最低为0')
      // }
      // if (this.form.difficultQuestionPercentagePosition > 100) {
      //   this.form.difficultQuestionPercentagePosition = 100
      //   this.$message.success('专业题库(单选题、多选题)困难比例最低为0')
      // }

      // if (this.form.simpleQuestionPercentagePosition < 0) {
      //   this.form.simpleQuestionPercentagePosition = 0
      //   this.$message.success('专业题库(单选题、多选题)简单比例最低为0')
      // }
      // if (this.form.mediumQuestionPercentagePosition < 0) {
      //   this.form.mediumQuestionPercentagePosition = 0
      //   this.$message.success('专业题库(单选题、多选题)普通比例最低为0')
      // }
      // if (this.form.difficultQuestionPercentagePosition < 0) {
      //   this.form.difficultQuestionPercentagePosition = 0
      //   this.$message.success('专业题库(单选题、多选题)困难比例最低为0')
      // }

      // if ((this.form.simpleQuestionPercentagePosition + this.form.mediumQuestionPercentagePosition + this.form.difficultQuestionPercentagePosition) > 100) {
      //   if (val == '简单') {
      //     this.form.simpleQuestionPercentagePosition = 100 - this.form.mediumQuestionPercentagePosition - this.form.difficultQuestionPercentagePosition
      //   }
      //   if (val == '普通') {
      //     this.form.mediumQuestionPercentagePosition = 100 - this.form.simpleQuestionPercentagePosition - this.form.difficultQuestionPercentagePosition
      //   }
      //   if (val == '困难') {
      //     this.form.difficultQuestionPercentagePosition = 100 - this.form.simpleQuestionPercentagePosition - this.form.mediumQuestionPercentagePosition
      //   }
      //   this.$message.success('专业题库(单选题、多选题)中简单题比例、中等题比例和困难题比例之和应该为100%')
      // }
    },
    xuanzeTongyongNandu() {},
    wenbenZhuanyeNandu() {},
    wenbenTongyongNandu() {},
    getStyle(item) {
      // let str = 'background-color: rgba(225, 241, 255, 1);'
      let str = 'border: 1px solid rgba(24, 144, 255, 1);'
      if(!item.logicallyDelete) {
        str = 'border: 1px solid rgba(24, 144, 255, 1);'
      }
      if(item.logicallyDelete) {
        str = 'border: 1px solid rgba(217, 217, 217, 1);'
      }
      return str
    },
    getData() {
      this.tiaojian.rankId = this.tiaojians.length > 0?this.tiaojians[0]:''
      this.tiaojian.departmentId = this.tiaojians.length > 1?this.tiaojians[1]:''
      this.tiaojian.positionId = this.tiaojians.length > 2?this.tiaojians[2]:''
      this.tiaojian.professionId = this.tiaojians.length > 3?this.tiaojians[3]:''
      $http.get('/paper/query/list', {params:this.tiaojian}).then(response => {
        if (response.success) {
          let name = '<span style=\"color:red\">' + this.tiaojian.name + '</span>'
          let table = []
          let query = {}
          let str = ''
          for (let i = 0; i < response.data.list.length; i++) {
            let query = response.data.list[i]
            if (this.tiaojian.name !== '') {
              str = response.data.list[i].name.replace(this.tiaojian.name, name)
              query.name = '<span>' + str + '</span>'
            }
            table.push(query)
          }
          this.tableData = table
          this.total = response.data.total
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    getAll() {
      $http.get('/examinee/grade/get/all').then(response => {
        if (response.success) {
          this.type_all = response.data
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    add() {
      this.panduan = false
      this.form = {
        singleChoiceAmount: '', // 单选题目数量
        singleChoiceScore: '', // 单选题目分数
        multipleChoiceAmount: '', // 多选题目数量
        multipleChoiceScore: '', // 多选题目分数
        caseQuestionAmount: '', // 案例题目数量
        caseQuestionScore: '', // 案例题目分数
        scenarioQuestionAmount: '', // 情景题目数量
        scenarioQuestionScore: '', // 情景题目分数
        creater: '', // 创建人
        departmentId: '', // 部门标识
        
        positionQuestionPercentage: '', // 专业题库占比(单选，多选)
        commonQuestionPercentage: '', // 通用题库占比(单选，多选)
        
        specialPositionPercentage: '', // 专用题库占比(案例，情景)
        specialCommonPercentage: '', // 通用题库占比(案例，情景)

        simpleQuestionPercentagePosition: '', // 专用题库-简单题占比(单选，多选)
        mediumQuestionPercentagePosition: '', // 专用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentagePosition: '', // 专用题库-困难题占比(单选，多选)
        
        simpleQuestionPercentageCommon: '', // 通用题库-简单题占比(单选，多选)
        mediumQuestionPercentageCommon: '', // 通用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentageCommon: '', // 通用题库-困难题占比(单选，多选)

        simpleSpecialPositionPercentage: '', // 专用题库-简单题难度占比(案例，情景)
        mediumSpecialPositionPercentage: '', // 专用题库-中等难度占比(案例，情景)
        difficultSpecialPositionPercentage: '', // 专用题库-困难题占比(案例，情景)

        simpleSpecialCommonPercentage: '', // 通用题库-简单题占比(案例，情景)
        mediumSpecialCommonPercentage: '', // 通用题库-中等难度题占比(案例，情景)
        difficultSpecialCommonPercentage: '', // 通用题库-困难难度题占比(案例，情景)
        name: '', // 试券名
        positionId: '', // 岗位标识
        professionId: '', // 专业标识
        rankId: '', // 级别标识
        score: '' // 试券总分
      }
      this.dialogFormVisible = true
    },
    toInfo(item) {
      this.$router.push({
        path: '/testPaper/info',
        query: {
          id: item.id
        }
      })
    },
    openXiugai(item) {
      $http.get('/paper/view/paperdetail/' + item.id).then(response => {
        if (response.success) {
          this.form_xiugai= {
            caseQuestionScore: response.data.caseQuestionScore,
            id: response.data.id,
            logicallyDelete: response.data.logicallyDelete,
            multipleChoiceScore: response.data.multipleChoiceScore,
            name: response.data.name,
            scenarioQuestionScore: response.data.scenarioQuestionScore,
            singleChoiceScore: response.data.singleChoiceScore
          }
          this.dialogXiugai = true
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    tingyong (val, pd) {
      $http.get('/paper/modify/paperstatus/' + val.id + '?status=' + pd,).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          val.logicallyDelete = pd
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    shanchu(val, index) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $http.get('/paper/delete/' + val.id).then(response => {
            if (response.success) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.tableData.splice(index, 1)
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    yanzheng() {
      if (this.form.name === '') {
        this.$message.success('试卷名称不能为空')
        return false
      }
      if (this.form.creater === '') {
        this.$message.success('出题人不能为空')
        return false
      }

      if (this.form.singleChoiceScore < 0) {
        this.$message.success('单选题分数不能小于0')
        return false
      }
      if (this.form.multipleChoiceScore < 0) {
        this.$message.success('多选题分数不能小于0')
        return false
      }
      if (this.form.caseQuestionScore < 0) {
        this.$message.success('案例题分数不能小于0')
        return false
      }
      if (this.form.scenarioQuestionScore < 0) {
        this.$message.success('情景题分数不能小于0')
        return false
      }
      if ((this.form.singleChoiceScore + this.form.multipleChoiceScore + this.form.caseQuestionScore + this.form.scenarioQuestionScore) < 1) {
        this.$message.success('总分数不能低于1')
        return false
      }

      if (this.form.singleChoiceAmount < 0) {
        this.$message.success('单选题数量不能小于0')
        return false
      }
      if (this.form.multipleChoiceAmount < 0) {
        this.$message.success('多选题数量不能小于0')
        return false
      }
      if (this.form.caseQuestionAmount < 0) {
        this.$message.success('案例题数量不能小于0')
        return false
      }
      if (this.form.scenarioQuestionAmount < 0) {
        this.$message.success('情景题数量不能小于0')
        return false
      }
      if ((this.form.singleChoiceAmount + this.form.multipleChoiceAmount + this.form.caseQuestionAmount + this.form.scenarioQuestionAmount) < 1) {
        this.$message.success('题目总数不能低于1')
        return false
      }

      if ((this.form.singleChoiceScore != '' && this.form.singleChoiceAmount == '') || (this.form.singleChoiceScore == '' && this.form.singleChoiceAmount != '')) {
        this.$message.success('单选题的数量和分数要么都为空，要么都为必填')
        return false
      }
      if ((this.form.multipleChoiceScore != '' && this.form.multipleChoiceAmount == '') || (this.form.multipleChoiceScore == '' && this.form.multipleChoiceAmount != '')) {
        this.$message.success('多选题的数量和分数要么都为空，要么都为必填')
        return false
      }
      if ((this.form.caseQuestionScore != '' && this.form.caseQuestionAmount == '') || (this.form.caseQuestionScore == '' && this.form.caseQuestionAmount != '')) {
        this.$message.success('案例题的数量和分数要么都为空，要么都为必填')
        return false
      }
      if ((this.form.scenarioQuestionScore != '' && this.form.scenarioQuestionAmount == '') || (this.form.scenarioQuestionScore == '' && this.form.scenarioQuestionAmount != '')) {
        this.$message.success('情景题的数量和分数要么都为空，要么都为必填')
        return false
      }

      if (!this.panduan) {
        return true
      }
      // 根据题目数量判断比例是否允许为空
      if(((this.form.singleChoiceAmount * 1 + this.form.multipleChoiceAmount * 1) > 0) && (this.form.positionQuestionPercentage === '' || this.form.commonQuestionPercentage === '')) {
        this.$message.success('单选题和多选题数量不为0，专业题库(单选题、多选题)中专业题库比例不能为空')
        return false
      }
      if(((this.form.caseQuestionAmount * 1 + this.form.scenarioQuestionAmount * 1) > 0) && (this.form.specialPositionPercentage === '' || this.form.specialCommonPercentage === '')) {
        this.$message.success('案例题和情景题数量不为0，专业题库(案例题、情景题)中专业题库比例不能为空')
        return false
      }

      if (this.form.positionQuestionPercentage>0&&((this.form.simpleQuestionPercentagePosition * 1 + this.form.mediumQuestionPercentagePosition * 1 + this.form.difficultQuestionPercentagePosition * 1) != 100)) {
        this.$message.success('专业题库(单选题、多选题)中简单题比例、中等题比例和困难题比例之和应该为100%')
        return false
      }
      if (this.form.commonQuestionPercentage>0&&((this.form.simpleQuestionPercentageCommon * 1 + this.form.mediumQuestionPercentageCommon * 1 + this.form.difficultQuestionPercentageCommon * 1) != 100)) {
        this.$message.success('通用题库(单选题、多选题)中简单题比例、中等题比例和困难题比例之和应该为100%')
        return false
      }
      if (this.form.specialPositionPercentage>0&&((this.form.simpleSpecialPositionPercentage * 1 + this.form.mediumSpecialPositionPercentage * 1 + this.form.difficultSpecialPositionPercentage * 1) != 100)) {
        this.$message.success('专业题库(案例题、情景题)中简单题比例、中等题比例和困难题比例之和应该为100%')
        return false
      }
      if (this.form.specialCommonPercentage>0&&((this.form.simpleSpecialCommonPercentage * 1 + this.form.mediumSpecialCommonPercentage * 1 + this.form.difficultSpecialCommonPercentage * 1) != 100)) {
        this.$message.success('通用题库(案例题、情景题)中简单题比例、中等题比例和困难题比例之和应该为100%')
        return false
      }
      return true
    },
    submit() {
      if(!this.yanzheng()) {
        return
      }
      this.form.rankId = this.dialog_tiaojians.length > 0?this.dialog_tiaojians[0]:''
      this.form.departmentId = this.dialog_tiaojians.length > 1?this.dialog_tiaojians[1]:''
      this.form.positionId = this.dialog_tiaojians.length > 2?this.dialog_tiaojians[2]:''
      this.form.professionId = this.dialog_tiaojians.length > 3?this.dialog_tiaojians[3]:''
      this.form.score = this.form.singleChoiceScore * this.form.singleChoiceAmount * 1 + this.form.multipleChoiceScore * this.form.multipleChoiceAmount * 1 + this.form.caseQuestionScore * this.form.caseQuestionAmount * 1 + this.form.scenarioQuestionScore * this.form.scenarioQuestionAmount * 1
      
      let query = {
        singleChoiceAmount: this.form.singleChoiceAmount || 0, // 单选题目数量
        singleChoiceScore: this.form.singleChoiceScore || 0, // 单选题目分数
        multipleChoiceAmount: this.form.multipleChoiceAmount || 0, // 多选题目数量
        multipleChoiceScore: this.form.multipleChoiceScore || 0, // 多选题目分数
        caseQuestionAmount: this.form.caseQuestionAmount || 0, // 案例题目数量
        caseQuestionScore: this.form.caseQuestionScore || 0, // 案例题目分数
        scenarioQuestionAmount: this.form.scenarioQuestionAmount || 0, // 情景题目数量
        scenarioQuestionScore: this.form.scenarioQuestionScore || 0, // 情景题目分数
        
        positionQuestionPercentage: this.form.positionQuestionPercentage || 0, // 专业题库占比(单选，多选)
        commonQuestionPercentage: this.form.commonQuestionPercentage || 0, // 通用题库占比(单选，多选)
        
        specialPositionPercentage: this.form.specialPositionPercentage || 0, // 专用题库占比(案例，情景)
        specialCommonPercentage: this.form.specialCommonPercentage || 0, // 通用题库占比(案例，情景)

        simpleQuestionPercentagePosition: this.form.simpleQuestionPercentagePosition || 0, // 专用题库-简单题占比(单选，多选)
        mediumQuestionPercentagePosition: this.form.mediumQuestionPercentagePosition || 0, // 专用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentagePosition: this.form.difficultQuestionPercentagePosition || 0, // 专用题库-困难题占比(单选，多选)
        
        simpleQuestionPercentageCommon: this.form.simpleQuestionPercentageCommon || 0, // 通用题库-简单题占比(单选，多选)
        mediumQuestionPercentageCommon: this.form.mediumQuestionPercentageCommon || 0, // 通用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentageCommon: this.form.difficultQuestionPercentageCommon || 0, // 通用题库-困难题占比(单选，多选)

        simpleSpecialPositionPercentage: this.form.simpleSpecialPositionPercentage || 0, // 专用题库-简单题难度占比(案例，情景)
        mediumSpecialPositionPercentage: this.form.mediumSpecialPositionPercentage || 0, // 专用题库-中等难度占比(案例，情景)
        difficultSpecialPositionPercentage: this.form.difficultSpecialPositionPercentage || 0, // 专用题库-困难题占比(案例，情景)

        simpleSpecialCommonPercentage: this.form.simpleSpecialCommonPercentage || 0, // 通用题库-简单题占比(案例，情景)
        mediumSpecialCommonPercentage: this.form.mediumSpecialCommonPercentage || 0, // 通用题库-中等难度题占比(案例，情景)
        difficultSpecialCommonPercentage: this.form.difficultSpecialCommonPercentage || 0, // 通用题库-困难难度题占比(案例，情景)

        creater: this.form.creater, // 创建人
        departmentId: this.form.departmentId, // 部门标识
        name: this.form.name || '', // 试券名
        positionId: this.form.positionId, // 岗位标识
        professionId: this.form.professionId, // 专业标识
        rankId: this.form.rankId, // 级别标识
        score: this.form.score // 试券总分
      }
      query.judge = this.panduan
      console.log(query)
      if (this.form.id) {
        $httpJSON.post('/paper/modify', query).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.tableData[this.index].titleDescription = this.form.titleDescription
            this.tableData[this.index].positionName = this.qiehuan(this.form.positionId, this.type_gangwei, 'value', 'name')
            this.tableData[this.index].levelName = this.qiehuan(this.form.levelId, this.type_nandu, 'value', 'name')
            this.dialogFormVisible = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        $httpJSON.post('/paper/add', query).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.dialogFormVisible = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    xiugai() {
      $httpJSON.post('/paper/modify', this.form_xiugai).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.dialogXiugai = false
            this.getData()
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiaojian.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tiaojian.page = val
      this.getData()
    },
    daochu(item) {
      window.location.href = localStorage.getItem('basePath') + '/export/paper/' + item.id
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  margin-bottom: 20px;
  width:100%;
  height: 32px;
  display: flex;
  align-items: center;
}
.label{
  margin-right: 9px;
  min-width: 87px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(24, 144, 255, 1);
  font-size: 14px;
  color: rgba(24, 144, 255, 1);
}
.top{
  width:100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left{
  line-height:30px;
  font-size: 20px;
  color: #333333;
}
.top-right{
  width: 272px;
  line-height:30px;
}
.body{
  margin:24px 0 30px 24px;
  padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  // height: calc(100vh - 0px);
  background-color: white;
}
.card{
  margin-bottom: 12px;
  width:100%;
  height: 147px;
  padding: 22px 14px 18px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}
.title{
  width:100%;
  height:36px;
  line-height: 36px;
  margin-top:10px;
  border-top: 1px solid #DCDFE6;
  color: rgba(51, 51, 51, 100);
  font-size: 16px;
  font-weight: bold;
}
.icon-blue{
  color:#409EFF
}
</style>
